<template>
  <div>
    <div id="unhandle" ref="unhandle" class="box linedunhandle" />
  </div>
</template>

<script>
const elementResizeDetectorMaker = require("element-resize-detector");
import { AjaxToken } from "@/api/common";
export default {
  props: {
    CpnID: "",
    ChnanelId: "",
    selectType: 0,
    StDt: "",
    EdDt: "",
    refsh: "",
  },
  data() {
    return {
      mychart: null,
      list: [],
    };
  },
  watch: {
    refsh: {
      deep: true,
      handler(val) {
        this.chart = null;
        this.initChart();
      },
    },
    CpnID: {
      deep: true,
      handler(val) {
        this.chart = null;
        this.initChart();
      },
    },
    ChnanelId: {
      deep: true,
      handler(val) {
        this.chart = null;
        this.initChart();
      },
    },
    selectType: {
      deep: true,
      handler(val) {
        this.chart = null;
        this.initChart();
      },
    },
    StDt: {
      deep: true,
      handler(val) {
        this.chart = null;
        this.initChart();
      },
    },
    EdDt: {
      deep: true,
      handler(val) {
        this.chart = null;
        this.initChart();
      },
    },
  },
  mounted() {
    this.initChart();
    const erd = elementResizeDetectorMaker();
    const that = this;
    erd.listenTo(document.getElementById("unhandle"), function (element) {
      that.$nextTick(function () {
        // 使echarts尺寸重置
        // console.log("========");
        that.mychart.resize();
      });
    });
    window.addEventListener("resize", () => {
      this.mychart.resize();
    });
  },

  methods: {
    initChart() {
      this.mychart = this.$echarts.init(this.$refs.unhandle);
      this.setOptions(this);
    },
    setOptions(thisobj) {
      this.Seach();
    },
    Seach() {
      var params = new URLSearchParams();
      params.append("CpnID", this.CpnID);
      params.append("ChannelName", this.ChnanelId);
      params.append("Tp", this.selectType);
      params.append("StDt", this.StDt);
      params.append("EdDt", this.EdDt);
      const loading = this.$loading({
        lock: true,
        text: "",
        spinner: "el-icon-loading",

        target: document.querySelector(".linedunhandle"),
      });
      backstage.GetUnprocessed(this, params, loading);
    },
  },
};

var backstage = {
  // 获取Mngrbaseinfo集合
  GetUnprocessed: function (thisobj, params, loading) {
    setTimeout(function () {
      AjaxToken(
        thisobj,
        "GetUnprocessed",
        params,
        "post",
        function (res) {
          // console.log(res);
          loading.close();
          // debugger;
          var result = res.data.data;
          var linedata_x = result[0].linedata_x;
          var chartdatas = result[0].data;
          var option = {
            title: {
              text: "当月累计未处理异常",
              top: "3%",
              left: 20,
              // 原画标题调整
              textStyle: {
                // 文字颜色
                color: "rgba(0, 0, 0, 0.85)",
                // 字体风格,'normal','italic','oblique'

                // 字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                fontWeight: "bold",
                // 字体系列
                fontFamily: "sans-serif",
                // 字体大小
                fontSize: 16,
              },
              subtext: "单位：笔", // 副标题文本
            },

            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            // legend: {
            //   top: '10%',
            //   left: 'center'
            // },
            grid: {
              left: "5%",
              right: "6%",
              bottom: "5%",
              top: "15%",
              containLabel: true,
            },
            xAxis: {
              type: "value",
              boundaryGap: [0, 0.01],
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
              },
            },
            yAxis: {
              type: "category",
              data:linedata_x,
            },
            series: [
              {
                name: "2021",
                type: "bar",
                data: chartdatas,
                itemStyle: {
                  color: "#F04864",
                },
              },
            ],
          };
          thisobj.mychart.setOption(option);

          window.addEventListener("resize", () => {
            thisobj.mychart.resize();
          });
        },
        function (err) {}
      );
    }, 2 * 1000);
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 450px;
}
</style>
